<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <style>
        body {
            margin: 0px;
        }
        .pg-header {
            height: 48px;
            background-color: #343a40!important;
            color: white;
            font-size: 14px;
            min-width: 1100px;
            line-height: 48px;
        }
        .pg-header .logo {
            width: 200px;
            font-size: 20px;
            background-color: #2d3b47;
            text-align: center;
        }
        .pg-header .hl-menu .item,.pg-header .hr-menu .item {
            padding: 0 10px;
            height: 48px;
            color: white;
            text-decoration: none;
        }
        .pg-header .hl-menu .item:hover,.pg-header .hr-menu .item:hover {
            background-color: #034c50;

            display: inline-block;
        }
        .pg-header .hl-menu .item-set{
            position: relative;
            display: inline-block;
        }
        .pg-header .hl-menu .item-set:hover .sets {
            display: block;
        }
        .pg-header .hl-menu .item-set .sets{
            position: absolute;
            width: 150px;
            background-color: aliceblue;
            border: 1px solid #dddddd;
            display: none;
        }
        .pg-header .hl-menu .item-set .sets a{
            display: block;
            line-height: 35px;
            text-decoration: none;

        }
        .avatar {
            position: relative;
            display: inline-block;
            float: right;
        }
        .avatar .sets {
            width: 150px;
            position: absolute;
            display: none;
            background-color: aliceblue;
            border: 1px solid #dddddd;
            left: -85px;
            top: 48px;
        }
        .avatar:hover .sets  {
            display: block;
        }
        .avatar .sets a{
            display: block;
            height: 35px;
            text-decoration: none;
        }
        .avatar img {
            height: 40px;
            margin-top: 4px;
        }
        .pg-body .menus {
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #eeeeee;
        }
        .menus .item-title {
            padding: 8px;
            background-color: #dddddd;
            cursor: pointer;
        }
        .pg-body .contents {
            position: absolute;
            top: 48px;
            left: 203px;
            right: 0;
            bottom: 0;
            overflow: scroll;
        }
        .menus .item .item-content a{
            display: block;
            padding: 3px;
            text-decoration: none;
            border-left: 3px solid transparent;
        }
        .menus .item .item-content a:hover {
            border-left: 3px solid #1c5a9c;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="logo left">独孤九剑</div>
    <div class="hl-menu left">
        <a class="item" href="#">破刀式</a>
        <a class="item" href="#">破枪式</a>
        <a class="item" href="#">破掌式</a>
        <div class="item-set" style="position: relative">
            <a class="item" href="#">破索式</a>
            <div class="sets">
                <a href="#">破鞭式</a>
                <a href="#">破箭式</a>
                <a href="#">破气式</a>
            </div>
        </div>
    </div>
    <div class="hr-menu right">
        <a class="item" href="#">消息</a>
        <a class="item" href="#">通知</a>
        <a class="item" href="#">任务</a>
        <div class="avatar">
            <a class="item" href="#">
                <img src="/static/image/avatar.png">
            </a>
            <div class="sets">
            <a href="#">离剑式一</a>
            <a href="#">离剑式二</a>
            <a href="#">离剑式三</a>
            </div>
        </div>
    </div>

</div>
<div class="pg-body">
    <div class="menus">
        <div class="item">
            <div class="item-title">consul管理</div>
            <div class="item-content">
                <a href="#">添加</a>
                <a href="#">删除</a>
                <a href="#">其他</a>
            </div>
        </div>
        <div class="item">
            <div class="item-title">账号管理</div>
            <div class="item-content">
                <a href="#">删除</a>
                <a href="#">对比</a>
                <a href="#">其他</a>
            </div>
        </div>
        <div class="item">
            <div class="item-title">其他管理</div>
            <div class="item-content">
                <a href="#">添加</a>
                <a href="#">删除</a>
                <a href="#">其他</a>
            </div>
        </div>
    </div>
    <div class="contents">
        <div style="height: 2000px"></div>
    </div>
    <div class="pg-footer">

    </div>
</div>
</body>
</html>